<template>
<!-- 竖下拉框 -->
  <div>
    <Row class="conditions" style="margin-right:0;margin:10px 0;">
      <span class="title">部门</span>
      <Tree :data="treeData" ref="tree" :render="renderContent"></Tree>
    </Row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: "parent 1",
          expand: true,
          selected: true,
          value: "1",
          children: [
            {
              title: "parent 1-1",
              expand: true,
              value: "11",
              children: [
                {
                  value: "111",
                  title: "leaf 1-1-1"
                },
                {
                  value: "112",
                  title: "leaf 1-1-2"
                }
              ]
            },
            {
              title: "parent 1-2",
              value: "12",
              expand: true,
              children: [
                {
                  value: "121",
                  title: "leaf 1-2-1"
                },
                {
                  value: "122",
                  title: "leaf 1-2-2"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    renderContent(h, { root, node, data }) {
      return h(
        "Option",
        {
          style: {
            display: "inline-block",
            margin: "0"
          },
          props: {
            value: data.value
          }
        },
        data.title
      );
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scope>
li .ivu-tree-title {
  // color: #add8ff !important;
}
.ivu-tree-title-selected,
.ivu-tree-title-selected:hover {
  // background-color: #2e6094 !important;
}
.ivu-tree-title:hover {
  // background-color: #2e6094;
}
</style>
